<template>
  <div class="app-container">
    <EtopSearch
      :options="options"
      @getData="searchFn"
      @resettingFn="resettingFn"
      @openChange="tabelHeight = $event ? 250 : 210"
    />
    <ETable
      style="margin-top: 20px"
      ref="ETable"
      :height="tabelHeight"
      :titleObj="titleObj"
      @sortFun="sortFun"
      :reqObj="setOf"
      :reqFn="getOrderSend"
      :reqArrKey="reqArrKey"
      :sortData="sortData"
    >
    </ETable>
  </div>
</template>

<script>
import ETable from "@/components/ETable";
import Eselect from "@/components/Eselect";
import EtopSearch from "@/components/EtopSearch";
import { getRecentMonth } from "@/utils";
import { getOrderSend } from "@/api/smsManage/sendQuery";
export default {
  name: "sendQuery",
  components: {
    ETable,
    Eselect,
    EtopSearch,
  },
  data() {
    return {
      tabelHeight: 210,
      setOf: {
        contactsName: "",
        requestDate: "",
        mobile: "",
        requestIsSuccess: "",
        sortStr: "sortList[0].sortName=requestTime&sortList[0].sortType=desc",
      },
      reqArrKey: {
        requestDate: ["requestDateStart", "requestDateEnd"],
      },
      options: [
        {
          type: "datePicker",
          name: "提交时间：",
          key: "requestDate",
          value: "",
        },
        {
          type: "input",
          name: "联系人：",
          key: "contactsName",
          value: "",
        },
        {
          type: "input",
          name: "手机号：",
          key: "mobile",
          value: "",
        },
        {
          type: "select",
          name: "提交状态：",
          key: "requestIsSuccess",
          value: "",
          options: [
            { label: "发送成功", value: "1" },
            { label: "发送失败", value: "0" },
          ],
        },
      ],
      sortData: {
        len: 8,
        column: ["requestTime"],
        orders: ["descending"],
      },
      titleObj: [
        {
          prop: "content",
          label: "发送内容",
          minWidth: "180",
        },
        { prop: "contactsName", label: "联系人", width: "120" },
        { prop: "mobile", label: "手机号", width: "120" },
        {
          prop: "requestTime",
          label: "提交时间",
          width: "160",
          sortable: "custom",
        },
        {
          prop: "requestIsSuccess",
          label: "提交状态",
          width: "110",
          formatter: (scope) => this.fmStatus(scope),
        },
        {
          prop: "sendTime",
          label: "发送时间",
          width: "160",
          sortable: "custom",
        },
        {
          prop: "sendIsSuccess",
          label: "发送状态",
          width: "110",
          formatter: (scope) => this.fmStatus2(scope),
        },
      ],
    };
  },
  created() {
    this.setTimeFn();
  },
  mounted() {
    this.getData();
  },
  methods: {
    getOrderSend,
    // 设置打开页面的进场时间
    setTimeFn() {
      this.setOf.requestDate = [];
      this.setOf.requestDate.push(getRecentMonth(1).datestart + " 00:00");
      this.setOf.requestDate.push(getRecentMonth(1).dateend + " 23:59");
      this.options[0].value = [];
      this.options[0].value.push(getRecentMonth(1).datestart + " 00:00");
      this.options[0].value.push(getRecentMonth(1).dateend + " 23:59");
    },
    getData() {
      this.$refs.ETable.getData();
    },
    searchFn(val) {
      // 如果在第四页搜索会把页码4传过去没数据，所以搜索变成1
      this.$refs.ETable.pageInfo.page = 1;
      // 保存传递出来的搜索数据，用于表格请求
      this.setOf.contactsName = val.contactsName;
      this.setOf.mobile = val.mobile;
      this.setOf.requestIsSuccess = val.requestIsSuccess;
      this.setOf.requestDate = val.requestDate;
      this.getData();
    },
    // 重置方法
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setOf.contactsName = "";
      this.setOf.mobile = "";
      this.setOf.requestIsSuccess = "";
      this.setTimeFn();
    },
    async sortFun(str) {
      this.setOf.sortStr = str;
      this.getData();
    },
    fmStatus(scope) {
      return (
        <span style={{ color: scope.requestIsSuccess == 1 ? "black" : "red" }}>
          {scope.requestIsSuccess == 1 ? "发送成功" : "发送失败"}
        </span>
      );
    },
    // 开通状态格式化
    fmStatus2(scope) {
      return (
        <div>
          <span v-show={scope.sendIsSuccess === 1}>成功</span>
          <span style="color: red" v-show={scope.sendIsSuccess === 0}>
            失败
          </span>
          <span v-show={scope.sendIsSuccess === null}></span>
        </div>
      );
    },
  },
};
</script>

<style scoped lang="scss"></style>
